<template>
  <div style="font-size: 12px; display: flex;">
    <div style="flex: 1; font-size: 18px;">
        <span :class="collaspeBtnClass" style="cursor: pointer;" @click="collapse"></span>
      </div>
      <el-dropdown style="width: 80px;cursor: pointer;">
        <span>{{name}}</span>
        <i class="el-icon-setting" style="margin-left: 5px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item style="margin-bottom: 15px;">
            <button @click="back" class="btn">退出登录</button>
          </el-dropdown-item>
          <el-dropdown-item >
            <button @click="ToAdminInfo" class="btn">个人中心</button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


  </div>
</template>

<script>
export default {
    name:'Top',
    props:{
        collaspeBtnClass: String,
        collapse: Function,
        name:String
    },
    data(){
      return{
        // name:""
      }
    },
    mounted(){
      // const s = localStorage.getItem("admin")
      // const j = JSON.parse(s)
      // this.name = j.name
    },
    methods:{
      back(){
        localStorage.clear()
        this.$router.push(
          "login"          
        );
      },
      ToAdminInfo(){
        this.$router.push(
          "adminInfo"          
        );
      },
     
    }
 }
</script>

<style scoped>
.btn{
  display: block;
  width: 100%;
  border: none;
  background-color: transparent;
  height: 30px;
}
</style>